<template>
    <h1 class="row-title">基本用法</h1>
    <div class="row">
        <XiaoQuan-Dropdown
            trigger="click"
            placement="bottom"
            :menu-options="options"
            @visible-change="visibleChangeHandler"
            @select="selectHandler"
            hideAfterClick
        >
            <XiaoQuan-Button type="primary">点击下拉菜单</XiaoQuan-Button>
        </XiaoQuan-Dropdown>
    </div>
    <h1 class="row-title">手动打开和关闭</h1>
    <div class="row">
        <XiaoQuan-Dropdown
            placement="bottom"
            trigger="click"
            manual
            :menu-options="options"
            @visible-change="visibleChangeHandler"
            @select="selectHandler"
            ref="dropdownRef"
        >
            <XiaoQuan-Button type="primary">手动打开下拉菜单</XiaoQuan-Button>
        </XiaoQuan-Dropdown>
    </div>
    <div class="row">
        <XiaoQuan-Button @click="openClick">打开</XiaoQuan-Button>
        <XiaoQuan-Button @click="closeClick">关闭</XiaoQuan-Button>
    </div>
    <h1 class="row-title">支持VNode节点</h1>
    <div class="row">
        <XiaoQuan-Dropdown
            placement="bottom"
            trigger="click"
            :menu-options="options2"
            @visible-change="visibleChangeHandler"
            @select="selectHandler"
        >
            <XiaoQuan-Button type="primary">点击打开下拉菜单</XiaoQuan-Button>
        </XiaoQuan-Dropdown>
    </div>
</template>

<script setup>
    import { ref, h } from "vue";
    const dropdownRef = ref(null);
    const options = [1, 2, 3, 4].map(el => {
        const item = { key: el, label: `item${el}`};
        if(el === 2) {
            item['divided'] = true;
        }else if(el === 3) {
            item['disabled'] = true;
        }
        return item;
    });
    const options2 = [
        { key: 1, label: h('div', { class: 'bar', innerHTML: 'hello' }) },
        { key: 2, label: 'item2', divided: true },
        { key: 3, label: 'item3', disabled: true },
        { key: 4, label: 'item4' }
    ];
    const visibleChangeHandler = (status)=> {
        console.log('当前下拉状态为：', status);
    }
    const selectHandler = (item)=> {
        console.log('selectHandler', item);
    }
    const openClick = ()=> dropdownRef.value.show();
    const closeClick = ()=> dropdownRef.value.hide();
</script>

<style lang="scss" scoped>

</style>